<template>
  <div class="system-header">
    <div class="inner">
      <span class="logo">
        <img src="@/assets/images/dangjian.png" alt="" />
        <h1 class="title">西藏自治区发展和改革委员会<br/>智慧党建办公系统</h1>
      </span>
      <div class="right" v-show="showRight">
        <Dropdown class="tool-group message-dropdown" @on-click="gotoDetail">
          <div class="tool-message">
            <Badge :count="messageCount" 
            :offset="[15, -6]">
              <Icon
                type="ios-notifications-outline"
                color="#fff"
                size="20"
              ></Icon>
            </Badge>
          </div>
          <DropdownMenu slot="list" v-show="messageList.length">
            <DropdownItem :name="msg.id" v-for="msg in messageList" :key="msg.id">
              <ListItemMeta
                :avatar="msg.avatar || defaultUserface"
                :title="`${msg.sendUserName ? msg.sendUserName + ' 回复了你' : ''}`"
                :description="msg.title"
              />
            </DropdownItem>
            <Divider />
            <Button class="more-btn" type="text" long @click="gotoMessage">查看更多</Button>
          </DropdownMenu>
        </Dropdown>
        <Dropdown class="tool-group system-dropdown" @on-click="handleUserDropdown">
          <div class="tool-item">系统设置<Icon type="ios-arrow-down" size="20" color="#fff" /></div>
          <DropdownMenu slot="list" class="text-center">
            <DropdownItem name="changePassword">修改密码</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <div class="tool-group">
          <span class="tool-item" @click="gotoHelp"><Icon type="md-help-circle" size="16" />帮助</span>
        </div>
        <div class="tool-group">
          <span class="tool-item" @click="handleLogout"><Icon type="ios-power" size="16" />退出</span>
        </div>
      </div>
      <change-password
        :showModal="showChangePwdModal"
        @closeModal="closeModal"
      ></change-password>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import ChangePassword from '@/components/ChangePassword'
import { defaultUserface } from '@/common/utils/const'

import {
  getUnreadNumRest,
  getUnreadListRest,
  logoutRest
} from '@/common/apis/system'

export default {
  name: 'systemHeader',
  props: {
    showRight: {
      default: true
    }
  },
  data() {
    return {
      messageCount: 0,
      messageList: [],
      defaultUserface,
      showChangePwdModal: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    showCommitteeMenu() {
      return this.userInfo.roleName === 'DJG_ROLE'
    },
    activeName() {
      if (this.$route.meta.activeName) {
        return this.$route.meta.activeName
      } else {
        return this.$route.name
      }
    }
  },
  components: {
    ChangePassword
  },
  mounted() {
    this.initData()
    this.timer = setInterval(this.initData, 5000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    initData() {
      getUnreadNumRest().then(result => {
        if (result.data.code === 200) {
          this.messageCount = result.data.content[3]
        }
      })
      getUnreadListRest().then(result => {
        if (result.data.code === 200) {
          this.messageList = result.data.content[3]
        }
      })
    },
    gotoMessage() {
      this.$router.push({path: '/message/list'})
    },
    gotoDetail(id) {
      this.$router.push('/message/detail/' + id)
      this.initData()
    },
    handleUserDropdown(name) {
      switch (name) {
        case 'changePassword':
          this.showChangePwdModal = true
          break
      }
    },
    closeModal() {
      this.showChangePwdModal = false
    },
    gotoHelp() {
      const routeData = this.$router.resolve({
        name: "helpLogin"
      });
      window.open(routeData.href, '_blank');
    },
    handleLogout() {
      this.$Modal.confirm({
        title: '提示',
        content: '您确定要退出系统？',
        onOk: () => {
          logoutRest().then(result => {
            if (result.status === 200) {
              this.$store.commit('SET_TOKEN')
              this.$store.commit('SET_USERINFO')
              this.$router.push('/login')
            }
          })
        },
        onCancel: () => {}
      })
    }
  }
}
</script>
